<template>
	<view class="p20r f24r">
		<view class="backColWhite borRad10r overHid mb40r" v-for="(item, index) in detailedList"
			@click="cliOrderBtn(item)" :key="item.id"
		>
			<view class="disFlex aliItCenter h100r pl20r pr20r backImgLiGrTRE5e7fcaFff">
				<view class="flex1 disFlex">
					<view class="flex1 f30r foWeiBold webLiCl1 webBoxOrVer overHid disWebBox">
						{{item.rname}}
					</view>
					<!-- <view class="flex1 disFlex webLiCl1 webBoxOrVer overHid disWebBox">
						<text class="backColWhite pl5r pr5r disInBlo lh40r borRad5r webLiCl1">
							{{item.tname}}
						</text>
					</view> -->
				</view>
				<view :class="['w110r', 'teAliRight', 'f26r',
						item.type == 2 ? 'col00c260' :
						item.type == 3 ? 'colC72d21' : 'col999'
					]"
				>
					{{
						item.type == 1 ? '未支付' :
						item.type == 2 ? '已支付' :
						item.type == 3 ? '已退款' :
						item.type == 4 ? '支付超时' : item.type
					}}
				</view>
			</view>
			<view class="p20r backColWhite">
				<!-- <view class="foWeiBold webLiCl1 webBoxOrVer overHid disWebBox">
					地址：福建省泉州市南安市曙宁大厦6楼
				</view> -->
				<view class="col999 disFlex">
					<view class="w120r">
						服务时间：
					</view>
					<view class="flex1">
						<view>
							开始：{{item.start_time}}
						</view>
						<view class="mt10r">
							结束：{{item.end_time}}
						</view>
					</view>
				</view>
				<view class="mt20r col999 disFlex">
					<view class="flex1">
						服务时长：{{item.hour}}小时
					</view>
					<view class="flex1">
						正常单/续单：{{
							item.order_status == 1 ? '正常单' :
							item.order_status == 2 ? '续单' : item.order_status
						}}
					</view>
				</view>
				<!-- <view class="mt20r col999">
					下单时间：{{item.date}}
				</view> -->
				<view class="mt20r col999 disFlex">
					<view class="flex1">
						实付金额：
						<text class="colFf3627">
							¥{{item.amount}}
						</text>
					</view>
					<view class="flex1">
						订单状态：
						<text :class="item.make_status == 1 || item.make_status == 4 ? 'colC72d21' : 'col00c260'">
							{{
								item.make_status == 1 ? '待使用' :
								item.make_status == 2 ? '使用中' :
								item.make_status == 3 ? '已完成' :
								item.make_status == 4 ? '已取消' : item.make_status
							}}
						</text>
					</view>
				</view>
				<view class="mt20r teAliRight">
					<text class="w140r lh50r disInBlo teAliCenter ml10r boSiBorBox bor1SC72d21 colC72d21 borRad10r"
						v-if="item.type == 2 && item.make_status == 1 && item.order_status == 1"
						@click.stop="cliRefundBtn(item.out_trade_no, item.id)"
					>
						发起退款
					</text>
					<text class="w140r lh50r disInBlo teAliCenter ml10r boSiBorBox bor1S4d76f4 col3579f7 borRad10r"
						v-if="item.type == 2 && item.make_status == 1"
						@click.stop="cliOneUse(item.out_trade_no, item.id)"
					>
						一键使用
					</text>
					<text class="w140r lh50r disInBlo teAliCenter ml10r boSiBorBox bor1S4d76f4 col3579f7 borRad10r"
						v-if="item.type == 2 && item.make_status == 2"
						@click.stop="cliOpenDoor(item.id)"
					>
						开门
					</text>
					<text class="w140r lh50r disInBlo teAliCenter ml10r boSiBorBox bor1SF59a23 colF59a23 borRad10r"
						v-if="item.make_status == 2"
						@click.stop="cliEndOrder(item.out_trade_no, item.id)"
					>
						结束订单
					</text>
					<text class="w140r lh50r disInBlo teAliCenter ml10r boSiBorBox bor1S00c260 col00c260 borRad10r"
						v-if="item.type == 1 && item.make_status == 1 && item.pay_type == 2"
						@click.stop="cliAppointmentTime1(item.out_trade_no, item.tid, item.rid, index)"
					>
						立即支付
					</text>
				</view>
			</view>
		</view>
		<view class="pt10r pb30r teAliCenter col999 f26r" v-if="noMore == true && detailedList.length">
			已加载全部
		</view>
		<view class="col999 poAbs top50P left50P trTrn50Pn50P f26r" v-if="detailedList.length == 0">
			暂无订单
		</view>
	</view>
</template>
<script>
import { isOrderDrawback, useTheOrder,
	completeToOrder,
	 getTaeRoomDataInfo, reToGetWechatpaymentInfo,
	 memberOpenDoor } from '@/utils/api.js'
export default {
	props: {
		detailedList: { type: Array, default: [] },
		noMore: { type: Boolean, default: false }
	},
	data() {
		return {
			
		}
	},
	methods: {
		cliOrderBtn(item) {
			uni.setStorageSync('orderDetail', item);
			uni.navigateTo({
				url: '/pages/order/orderDetail'
			})
		},
		cliRefundBtn(out_trade_no, id) {
			uni.showModal({
				title: '提示', content: '确定发起退款？', confirmColor: '#99c043',
				success:res1 => {
					if (res1.confirm) {
						isOrderDrawback({
							token: uni.getStorageSync('token'),
							out_trade_no, id
						}).then(res2 => {
							this.$emit('refreshList');
							uni.showToast({
								title: '退款成功', duration: 3000
							})
						})
					}
				}
			})
		},
		cliOneUse(out_trade_no, id) {
			uni.showModal({
				title: '提示', content: '确定一键使用？', confirmColor: '#99c043',
				success:res1 => {
					if (res1.confirm) {
						useTheOrder({
							token: uni.getStorageSync('token'),
							out_trade_no, id
						}).then(res2 => {
							this.$emit('refreshList');
							uni.showToast({
								title: '一键使用成功', duration: 3000
							})
						})
					}
				}
			})
		},
		cliOpenDoor(id) {
			uni.showModal({
				title: '提示', content: '确定此房间开门？', confirmColor: '#99c043',
				success:res1 => {
					if (res1.confirm) {
						uni.showLoading({ mask: true, title: '正在开门中...' })
						memberOpenDoor({
							token: uni.getStorageSync('token'), id
						}).then(res2 => {
							uni.hideLoading()
							if(res2.code == '000000') {
								uni.showModal({
									title: '提示', content: res2.message,
									confirmColor: '#99c043', showCancel: false, confirmText: '我知道了',
									success:res3 => {
										if (res1.confirm) {
											
										}
									}
								})
							}else {
								uni.showModal({
									title: '开门失败', content: res2.message,
									confirmColor: '#99c043', showCancel: false, confirmText: '我知道了',
									success:res3 => {
										if (res1.confirm) {
											
										}
									}
								})
							}
						})
					}
				}
			})
		},
		cliEndOrder(out_trade_no, id) {
			uni.showModal({
				title: '提示', content: '确定手动结束订单？', confirmColor: '#99c043',
				success:res1 => {
					if (res1.confirm) {
						console.log(111, 11)
						completeToOrder({
							token: uni.getStorageSync('token'),
							out_trade_no, id
						}).then(res2 => {
							this.$emit('refreshList');
							uni.showToast({
								title: '结束订单成功', duration: 3000
							})
						})
					}
				}
			})
		},
		cliAppointmentTime1(out_trade_no, tid, rid, index) {
			uni.showModal({
				title: '提示', content: '确定立即支付订单？', confirmColor: '#99c043',
				success:res1 => {
					if (res1.confirm) {
						reToGetWechatpaymentInfo({ out_trade_no }).then(res2 => {
							uni.requestPayment({
								provider: 'wxpay',
								timeStamp: res2.data.timeStamp,
								nonceStr: res2.data.nonceStr,
								package: res2.data.package,
								signType: res2.data.signType,
								paySign: res2.data.paySign,
								success:res3 => {
									console.log('支付成功', res3);
									this.cliAppointmentTime2(1, '预订成功', '支付成功', tid, rid);
								}, fail:err3 => {
									console.log('支付失败-err3', err3);
									this.cliAppointmentTime2(2, '预订失败', '您已取消支付', tid, rid);
									this.detailedList[index].out_trade_no = res2.data.out_trade_no;
								}
							})
						})
					}
				}
			})
		},
		cliAppointmentTime2(type, title, content, tid, rid) {
			if(type == 1) {
				uni.requestSubscribeMessage({
				  tmplIds: [
					  '3A5LLFNlLOI8FmuQg1VoTSQ2Z-sgMbdhENmlyfd15FM',//服务完成通知
					  'B8AviMN-18noH7ULHMevdxfu08liKx9vjG16v-LJHEE',//订单即将到期提醒
					  'yQ8VFslxofDFsztSLAEAhz1by8KftlqXeewH6a7ENbE'//订单付款通知
				  ],
				  success:res1 => {
					  console.log('res1', res1)
				  }, fail:err1 => {
					  console.log('err1', err1)
				  }
				})
				getTaeRoomDataInfo({
					tid, rid
				}).then(res => {
					let historyRoomList = uni.getStorageSync('historyRoomList');
					if(historyRoomList == '') historyRoomList = [];
					historyRoomList.push(res.data);
					uni.setStorageSync('historyRoomList', historyRoomList);
				})
			}
			uni.showModal({
				title, content, confirmColor: '#99c043', showCancel: false, confirmText: '我知道了',
				success:res1 => {
					if (res1.confirm) {
						if(type == 1) this.$emit('refreshList');
					}
				}
			})
		},
	}
}
</script>
<style>
</style>